<template>
  <div class="content">
    <view
      class="box flex"
      v-for="(item, index) in list"
      :key="index"
      @click="
        proxy.$utils.toLink(`/packagePages/release/details?id=${item.postsId}`)
      "
    >
      <uv-image
        :src="img_format(item.postsInfo.imgs)"
        width="70px"
        height="70px"
        radius="5"
      ></uv-image>
      <view class="info fz14">
        <view class="desc">{{ item.postsInfo.desc }}</view>
        <view class="price flex fz12 alignBaseline"
          >￥
          <text class="bold fz16">{{ item.postsInfo.price }}</text>
        </view>
      </view>
    </view>

    <uv-load-more :status="status" />
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();

let list = ref([]);
let total = 0;
let model = ref({
  pageIndex: 1,
  pageSize: 10,
});
let status = ref("loadmore");

onLoad(() => {
  getInfo();
});
onReachBottom(() => {
  getMore();
});

let img_format = (e) => {
  if (!e)
    return "https://oss.seenlove.com/images/cee19ba6338ae988b00fb62fe916b97b.png";
  let arr = e.split(",");
  return arr[0];
};

let getMore = () => {
  if (list.value.length >= total) return;
  model.current++;
  getInfo();
};

let getInfo = async () => {
  try {
    status.value = "loading";
    let resp = await proxy.$apis.releaseCollection({
      type: "list",
      data: model.value,
    });
    total = resp.total;
    let arr = [...list.value];
    if (resp.rows.length) {
      arr.push(...resp.rows);
    }
    list.value = proxy.$utils.arrayUnique2(arr, "_id");
    console.log("list.value", list.value);
  } catch (error) {
  } finally {
    status.value = "nomore";
  }
};

let toLink = (e) => {};
</script>

<style lang="scss" scoped>
.content {
  padding: 10px;
  .box {
    margin-bottom: 15px;
    border-bottom: 0.5px solid #edeff2;
    padding-bottom: 15px;
    .info {
      margin-left: 15px;
      position: relative;
      .desc {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
      }
      .price {
        position: absolute;
        left: 0;
        bottom: 0;
        color: #ff384e;
      }
    }
  }
}
</style>
